<template>
  <el-dialog
          title="派单状态查询"
          :visible.sync="isShow">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="报修人信息" name="first">
        <el-descriptions title="报修人信息" border>
          <el-descriptions-item label="报修人村庄id">{{showInfo.u_village_id}}</el-descriptions-item>
          <el-descriptions-item label="报修用户id">{{showInfo.u_id}}</el-descriptions-item>
          <el-descriptions-item label="报修人真实姓名">{{showInfo.u_true_name}}</el-descriptions-item>
          <el-descriptions-item label="报修人电话">{{showInfo.u_phone}}</el-descriptions-item>
          <el-descriptions-item label="报修人现居住地">{{showInfo.ra_detail_address}}</el-descriptions-item>
          <el-descriptions-item label="报修人户籍所在地址">{{showInfo.ra_detail_address}}</el-descriptions-item>
          <el-descriptions-item label="报修人联系电话">{{showInfo.ra_contact}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="报修单信息" name="second">
        <el-descriptions title="报修单信息" border>
          <el-descriptions-item label="报修类型">{{showInfo.ra_type}}</el-descriptions-item>
          <el-descriptions-item label="报修单号">{{showInfo.ra_id}}</el-descriptions-item>
          <el-descriptions-item label="报修单状态">
            <el-tag :type="showInfo.ra_state===0?'danger':(showInfo.ra_state===1?'':'success')">
              {{showInfo.ra_state===0?'取消':(showInfo.ra_state===1?'进行中':'完成')}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="报修时间">{{showInfo.dr_time}}</el-descriptions-item>
          <el-descriptions-item label="报修人报修的详细位置">{{showInfo.ra_detail_address}}</el-descriptions-item>
          <el-descriptions-item label="报修人报修详细描述">{{showInfo.ra_desc}}</el-descriptions-item>
          <el-descriptions-item label="村庄名称">{{showInfo.ra_detail_address}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="派单信息" name="third">
        <el-descriptions title="派单信息" border>
          <el-descriptions-item label="处理人角色">
            {{showInfo.rt_role===1?'负责人':'打工人'}}
          </el-descriptions-item>
          <el-descriptions-item label="派单单子状态">
            <el-tag :type="showInfo.dr_status===0?'danger':(showInfo.dr_status===1?'':'success')">
              {{showInfo.dr_status===0?'取消':(showInfo.dr_status===1?'进行中':'完成')}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="派单号id">{{showInfo.dr_id}}</el-descriptions-item>
          <el-descriptions-item label="派单时间">{{showInfo.dr_time}}</el-descriptions-item>
          <el-descriptions-item label="派单负责人姓名">{{showInfo.rt_name}}</el-descriptions-item>
          <el-descriptions-item label="派单负责人联系电话">{{showInfo.rt_contact}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
export default {
  name: 'SearchRepairApply',
  props: ['getRaId', 'isShow'],
  methods: {
    SearchRepairApplyhandleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.showInfo = {}
          done()
        })
        .catch(_ => {})
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    showMe () {
      this.isShow = !this.isShow
      // this.$message('派单管理页面的showMe函数被调用了,isShow值现在为:' + this.isShow)
    },
    changeRaId (newRaId) {
      this.getRaId = newRaId
    }
  },
  data () {
    return {
      showInfo: {},
      activeName: 'second'
    }
  },
  watch: {
    getRaId: function (newId, oldId) {
      this.$axios.post('/selectViewDispatchRepairInfo', {
        ra_id: newId
      }).then(successResponse => {
        this.showInfo = successResponse.data
      }).catch(failResponse => {
        this.$message.error('服务器部门信息拉取失败')
      })
    }
    // isShow: function (newS, old) {
    //   this.$message('管理派单信息面板有变化,isShow值为:' + newS)
    // }
  }
}
</script>

<style scoped>

</style>
